<template>
  <view class="page">

    <Head title="团队业绩明细" :transparency="1"></Head>
    <view class="list">
      <view class="item" v-for="item in list" :key="item.id">
        <view class="line">
          <text class="detailed">{{ item.detailed }}</text>
          <text>{{ item.createTime }}</text>
        </view>
        <view class="line">
          <text>金额:</text>
          <text :class="item.inOut == 1 ? 'in' : 'out'">{{ item.inOut == 1 ? "-" : "+" }}{{ item.amount }}</text>
        </view>
        <view class="line">
          <text>余额:</text>
          <text class="balance">{{ item.balance }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import Head from "@/components/Head/index"
import { transferRecord } from "@/api/dj_order"
export default {
  components: {
    Head,
  },
  props: {},
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: 3,
      },

      list: [],
      total: 0,
    }
  },
  computed: {},
  watch: {},
  onLoad() {
    this.getData()
  },
  onReachBottom() {
    if (this.total > this.list.length) {
      this.queryParams.pageNum = this.queryParams.pageNum + 1
      this.getData()
    } else {
      uni.showToast({
        title: "没有更多了",
        duration: 2000,
        icon: "none",
      })
    }
  },
  methods: {
    async getData() {
      let res = await transferRecord(this.queryParams)
      if (res.code === 200) {
        console.log(res)
        this.list = this.list.concat(res.data.records)
        this.total = res.data.total
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;

  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;

  box-sizing: border-box;
  padding-top: calc(var(--status-bar-height) + 100rpx);

  .list {
    background-color: #f1f1f1;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;

    width: 750rpx;

    .item {
      background-color: #ffffff;

      width: 720rpx;
      min-height: 100rpx;

      border: 1px solid #cccccc;
      margin: 10rpx 0;

      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      align-items: center;

      box-sizing: border-box;
      padding: 0 10rpx;

      border-radius: 10rpx;

      .line {
        width: 100%;

        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;

        height: 50rpx;
        line-height: 50rpx;

        font-size: 24rpx;
        color: #333333;

        .balance {
          color: #9c1616;
        }

        .in {
          color: green;
          font-size: 36rpx;
          font-weight: 600;
        }

        .out {
          color: #ff0000;
          font-size: 36rpx;
          font-weight: 600;
        }

        text:first-child {
          color: #999999;
        }

        .detailed {
          color: #333333 !important;
          font-size: 28rpx;
        }
      }
    }
  }
}
</style>
